
<template>
    <div>
        <UTable loading :loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
            :progress="{ color: 'primary', animation: 'carousel' }" v-if="tableData" :rows="tableData" :columns="columns">
            <template #actions-data="{ row }">
                <!-- <span class=" hover:cursor-pointer">{{ row.actions }}</span> -->
                <UDropdown :items="items(row)">
                    <UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-horizontal-20-solid" />
                </UDropdown>
            </template>
        </UTable>
        <UModal v-model="isOpen">
            <UCard>
                <template #header>
                    <div class="h-8">
                        <h1 class="text-lg font-bold">修改信息</h1>
                    </div>
                </template>
                <div class=" flex flex-col gap-9">
                    <div><span class=" text-2xl">id</span>
                        <UInput v-model="item.id" />
                    </div>
                    <div><span class=" text-2xl">username</span>
                        <UInput v-model="item.username" />
                    </div>
                    <div><span class=" text-2xl">password</span>
                        <UInput v-model="item.password" />
                    </div>
                    <div><span class=" text-2xl">role</span>
                        <UInput v-model="item.role" />
                    </div>
                    <div><span class=" text-2xl">email</span>
                        <UInput v-model="item.email" />
                    </div>
                    <div><span class=" text-2xl">pics</span>
                        <UInput v-model="item.pics" />
                    </div>
                    <div><span class=" text-2xl">gender</span>
                        <UInput v-model="item.gender" />
                    </div>
                    <div class="flex gap-2">
                        <UButton @click="() => { updateOne() }">
                            确认
                        </UButton>
                        <UButton color="white" @click="isOpen = false">
                            取消
                        </UButton>
                    </div>
                </div>
            </UCard>
        </UModal>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import axios from 'axios'
const toast = useToast()
let item = reactive({
    id: 0,
    id: '', username: '', password: '', role: '', email: '', pics: '', gender: '',
})
let tableData = ref([])
let isOpen = ref(false)
function getAll() {
    axios.post('http://localhost:6677/users/get_one', {}).then(res => {
        let resp = res.data
        if (resp.code !== 200) {
            console.log(resp)
        } else {
            tableData.value = resp.data
        }
    })
}
function deleteOne(item) {
    axios.post('http://localhost:6677/users/delete_one', item).then(res => {
        let resp = res.data
        if (resp.code !== 200) {
            toast.add({
                icon: 'i-heroicons-information-circle-20-solid',
                title: '删除失败',
                color: 'red',
                // description: resp.msg,
            })
        } else {
            toast.add({
                icon: 'i-heroicons-information-circle-20-solid',
                title: '删除成功',
                // description: resp.msg,
            })
            getAll()
        }
    })
}
function updateOne() {
    item.id = item.id
    axios.post('http://localhost:6677/users/update_one', { 'cond': { 'id': item.id }, 'item': item }).then(res => {
        let resp = res.data
        if (resp.code !== 200) {
            toast.add({
                icon: 'i-heroicons-information-circle-20-solid',
                title: '更新失败',
                color: 'red',
                // description: resp.msg,
            })
        } else {
            toast.add({
                icon: 'i-heroicons-information-circle-20-solid',
                title: '更新成功',
                // description: resp.msg,
            })
            getAll()
            isOpen.value = false
        }
    })
}
getAll()

const columns = [
    { 'key': 'id', 'label': 'id' }, { 'key': 'username', 'label': 'username' }, { 'key': 'password', 'label': 'password' }, { 'key': 'role', 'label': 'role' }, { 'key': 'email', 'label': 'email' }, { 'key': 'pics', 'label': 'pics' }, { 'key': 'gender', 'label': 'gender' },
    { 'key': 'actions', 'label': '操作' },
]

const items = (row) => [
    [{
        label: 'Edit',
        icon: 'i-heroicons-pencil-square-20-solid',
        click: () => {
            isOpen.value = true
            console.log(row)
            item.id = row.id
            item.id = row.id; item.username = row.username; item.password = row.password; item.role = row.role; item.email = row.email; item.pics = row.pics; item.gender = row.gender;
        }
    }, {
        label: 'Delete',
        icon: 'i-heroicons-trash-20-solid',
        click: () => { deleteOne(row) }
    }]
]

</script> 

<style scoped>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>

